<template>
  <div class="content-slot-example">
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2">📄 Content 插槽演示</h3>
      <p class="text-base-content/70 text-sm mb-4">
        演示如何使用 <code>#content</code> 插槽自定义弹窗内容区域
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- 默认内容 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">默认内容</h4>
          <p class="text-sm text-base-content/70 mb-4">使用组件默认的内容区域</p>

          <button @click="showDefaultModal = true" class="btn btn-primary btn-sm">查看效果</button>
        </div>
      </div>

      <!-- 表单内容 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">表单内容</h4>
          <p class="text-sm text-base-content/70 mb-4">包含表单的内容区域</p>

          <button @click="showFormModal = true" class="btn btn-secondary btn-sm">查看效果</button>
        </div>
      </div>

      <!-- 列表内容 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">列表内容</h4>
          <p class="text-sm text-base-content/70 mb-4">包含列表的内容区域</p>

          <button @click="showListModal = true" class="btn btn-accent btn-sm">查看效果</button>
        </div>
      </div>

      <!-- 图片内容 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h4 class="card-title text-base">图片内容</h4>
          <p class="text-sm text-base-content/70 mb-4">包含图片的内容区域</p>

          <button @click="showImageModal = true" class="btn btn-warning btn-sm">查看效果</button>
        </div>
      </div>
    </div>

    <!-- 默认内容 Modal -->
    <Modal v-model:visible="showDefaultModal" size="lg">
      <template #content>
        <div class="p-8 text-center">
          <div class="text-4xl mb-4">📄</div>
          <h3 class="text-xl font-bold mb-2">默认内容</h3>
          <p class="text-base-content/70">这是使用默认内容区域的弹窗</p>
        </div>
      </template>
    </Modal>

    <!-- 表单内容 Modal -->
    <Modal v-model:visible="showFormModal" size="lg">
      <template #content>
        <div class="p-6">
          <h3 class="text-lg font-semibold mb-4">用户信息表单</h3>
          <form class="space-y-4">
            <div class="form-control">
              <label class="label">
                <span class="label-text">姓名</span>
              </label>
              <input type="text" placeholder="请输入姓名" class="input input-bordered" />
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">邮箱</span>
              </label>
              <input type="email" placeholder="请输入邮箱" class="input input-bordered" />
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">电话</span>
              </label>
              <input type="tel" placeholder="请输入电话" class="input input-bordered" />
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">备注</span>
              </label>
              <textarea class="textarea textarea-bordered" placeholder="请输入备注"></textarea>
            </div>
          </form>
        </div>
      </template>
    </Modal>

    <!-- 列表内容 Modal -->
    <Modal v-model:visible="showListModal" size="lg">
      <template #content>
        <div class="p-6">
          <h3 class="text-lg font-semibold mb-4">功能列表</h3>
          <div class="space-y-3">
            <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg">
              <span class="text-2xl">📝</span>
              <div>
                <h4 class="font-medium">文本编辑</h4>
                <p class="text-sm text-base-content/70">支持富文本编辑功能</p>
              </div>
            </div>

            <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg">
              <span class="text-2xl">🖼️</span>
              <div>
                <h4 class="font-medium">图片上传</h4>
                <p class="text-sm text-base-content/70">支持多种图片格式上传</p>
              </div>
            </div>

            <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg">
              <span class="text-2xl">📊</span>
              <div>
                <h4 class="font-medium">数据分析</h4>
                <p class="text-sm text-base-content/70">提供详细的数据分析报告</p>
              </div>
            </div>

            <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg">
              <span class="text-2xl">⚙️</span>
              <div>
                <h4 class="font-medium">系统设置</h4>
                <p class="text-sm text-base-content/70">自定义系统配置选项</p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </Modal>

    <!-- 图片内容 Modal -->
    <Modal v-model:visible="showImageModal" size="xl">
      <template #content>
        <div class="p-6">
          <h3 class="text-lg font-semibold mb-4">图片展示</h3>
          <div class="grid grid-cols-2 gap-4">
            <div class="card bg-base-200">
              <div class="card-body p-4 text-center">
                <div class="text-4xl mb-2">🌅</div>
                <h4 class="font-medium">日出</h4>
                <p class="text-sm text-base-content/70">美丽的日出景色</p>
              </div>
            </div>

            <div class="card bg-base-200">
              <div class="card-body p-4 text-center">
                <div class="text-4xl mb-2">🌙</div>
                <h4 class="font-medium">月夜</h4>
                <p class="text-sm text-base-content/70">宁静的月夜</p>
              </div>
            </div>

            <div class="card bg-base-200">
              <div class="card-body p-4 text-center">
                <div class="text-4xl mb-2">🏔️</div>
                <h4 class="font-medium">山峰</h4>
                <p class="text-sm text-base-content/70">雄伟的山峰</p>
              </div>
            </div>

            <div class="card bg-base-200">
              <div class="card-body p-4 text-center">
                <div class="text-4xl mb-2">🌊</div>
                <h4 class="font-medium">海洋</h4>
                <p class="text-sm text-base-content/70">浩瀚的海洋</p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Modal } from '@/components/common/modal'

defineOptions({
  name: 'ContentSlotExample',
})

// 控制各个Modal的显示状态
const showDefaultModal = ref(false)
const showFormModal = ref(false)
const showListModal = ref(false)
const showImageModal = ref(false)
</script>

<style scoped>
.content-slot-example {
  font-family:
    'Inter',
    'SF Pro Display',
    'SF Pro Text',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Helvetica Neue',
    'Arial',
    sans-serif;
}

code {
  font-family:
    'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New',
    monospace;
  background: hsl(var(--b2));
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}
</style>
